<template>
    <div>
        <h3>主播首页</h3>
        <mineReturn title="我的关注" />
        <div class="all" v-for="item in data" :key="item.id" @click="clickHandler" >
            <div class="icmg">
                <van-image round width="5rem" height="5rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            </div>
            <div class="count">
                <ul>
                    <li>
                        <span class="big">{{ item.name }}</span>
                    </li>
                    <li>
                        <span color="green">{{ item.title }}</span>
                    </li>
                </ul>
                <p font-size="12px">{{ item.intro }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { attentionApi } from "@/api/mineApi"
export default {
    data() {
        return {
            data: []
        }
    },
    async created() {
        let a = await attentionApi()
        console.log(a)
        this.data = a
    },
    methods: {
        clickHandler() {
            this.$router.push("/aboutMine/attention-detail")
        }
    }
}
</script>

<style lang="scss" scoped>
.all {
    width: 90%;
    height: 120px;
    margin: 10px;
}

.icmg {
    margin-top: 10px;
    width: 20%;
    float: left;
}

.count {
    width: 75%;
    float: right;

    ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 13px 0;
    }

    ul>li>span {
        font-size: 14px;
        color: green;
    }

    p {
        font-size: 14px;
    }

    .big {
        font-size: 20px;
        color: black;
    }
}</style>